<template>
  <div class="ebook-bookmark" ref="bookmark">
    <div class="ebook-bookmark-text-wrapper">
      <div
        class="ebook-bookmark-down-wrapper" ref="iconDown" >
        <span class="icon-down"></span>
      </div>
      <div class="ebook-bookmark-text">{{text}}</div>
    </div>
      <div class="ebook-bookmark-icon-wrapper"
      :style="isFixed?fixedStyle:{}"
      >
        <bookmark
          :color="color"
          :width="15"
          :height="35"
        ></bookmark>
      </div>
  </div>
</template>
<script>
import Bookmark from './BookMark'
import { realPx } from '../../utils/utils';
import { ebookMixin } from '../../utils/mixin';
import { getBookmark, saveBookmark } from '../../utils/localStorage';
const BLUE = '#346cbc'
const WHITE = '#fff'
export default {
  mixins: [ebookMixin],
  components: {
    Bookmark
  },
  computed: {
    height() {
      return realPx(35)
    },
    thresold() {
      return realPx(55)
    }, // 临界值
    fixedStyle(){
        return {
            position:'fixed',
            top:0,
            right:`${(window.innerWidth - this.$refs.bookmark.clientWidth)/2}px`
        }
    }
  },
  watch: {
    offsetY(v) {
      // 第二阶段 未到达临界
      if(!this.bookAvailable || this.menuVisible || this.settingVisible >=0){
          return ;
      }
      if (v >= this.height && v <= this.thresold) {
        this.beforeThreshold(v)
      } else if (v >= this.thresold) {
        // 第三阶段 超越临界
        this.afterThreshold(v)
      } else if (v > 0 && v < this.height) {
        // 状态1
        this.beforeHeight()
      } else if(v===0){
          // 归位
          this.restore()
      }
    },
    isBookmark(isBookmark){
        this.isFixed = isBookmark
        if(isBookmark){
            this.color = BLUE

        }else{
            this.color = WHITE

        }
    }
  },
  data() {
    return {
      text: this.$t('book.pulldownAddMark'),
      color: WHITE,
      isFixed:false
    }
  },
  methods: {
      addBookmark(){
          this.bookmark = getBookmark(this.fileName)
          // 初始化bookmarks
          if(!this.bookmark){
              this.bookmark = []
          }

          const currentLocation = this.currentBook.rendition.currentLocation()
          const cfiBase = currentLocation.start.cfi.replace(/!.*/,'')
          const cfistart = currentLocation.start.cfi.replace(/.*!/,'').replace(/.*!/,'').replace(/\)$/,'')
          const cfiend = currentLocation.end.cfi.replace(/.*!/,'').replace(/.*!/,'').replace(/\)$/,'')
          const cfirange = `${cfiBase}!,${cfistart},${cfiend})`
          this.currentBook.getRange(cfirange).then((result) => {
              let text = result.toString().replace(/\s\s/g,'')
              this.bookmark.push({
                  cfi:currentLocation.start.cfi,
                  text
              })
              saveBookmark(this.fileName,this.bookmark)
          })
      },
      removeBookmark(){
          const currentLocation = this.currentBook.rendition.currentLocation()
          const cfi = currentLocation.start.cfi
          this.bookmark = getBookmark(this.fileName)
          if(this.bookmark){
              saveBookmark(this.fileName,this.bookmark.filter(item=>item.cfi !== cfi))
              this.setIsBookmark(false)
          }
      },
      restore(){
          setTimeout(()=>{
              // 状态4 归位
              this.$refs.bookmark.style.top = `${-this.height}px`
              this.$refs.iconDown.style.transform = 'rotate(0deg)'
          },200)
          if(this.isFixed){
              this.setIsBookmark(true)
              this.addBookmark()
          }else{
              this.setIsBookmark(false)
              this.removeBookmark()
          }
      },
    beforeHeight() {
              // 状态1 未超过书签的高度
      if (this.isBookmark) {
        this.text = this.$t('book.pulldownDeleteMark')
        this.color = BLUE
        this.isFixed = true        
      }
      else {
        this.text = this.$t('book.pulldownAddMark')
        this.color = WHITE
        this.isFixed = false        
      }
    },
    beforeThreshold(v) {
      this.$refs.bookmark.style.top = `${-v}px`
      this.beforeHeight()
      const iconDown = this.$refs.iconDown
      if (iconDown.style.transform === 'rotate(180deg)'){
          iconDown.style.transform = 'rotate(0deg)'
      }
    },
    afterThreshold(v) {
      this.$refs.bookmark.style.top = `${-v}px`
      if (this.isBookmark) {
        this.text = this.$t('book.releaseDeleteMark')
        this.color = WHITE
        this.isFixed = false

      } else {
        this.text = this.$t('book.releaseAddMark')
        this.color = BLUE
        this.isFixed = true
      }
      const iconDown = this.$refs.iconDown
      if (iconDown.style.transform === '' || iconDown.style.transform === 'rotate(0deg)'){
          iconDown.style.transform = 'rotate(180deg)'
      }
    }

  }
}
</script>
<style lang="scss" scoped>
@import "@styles/global.scss";
.ebook-bookmark {
  position: absolute;
  top: px2rem(-35);
  left: 0;
  z-index: 200;
  width: 100%;
  height: px2rem(25);

  .ebook-bookmark-text-wrapper {
    position: absolute;
    right: px2rem(45);
    bottom: 0;
    display: flex;
    .ebook-bookmark-down-wrapper {
      font-size: px2rem(14);
      color: white;
      transition: all 0.2s linear;
      @include center;
    }
    .ebook-bookmark-text {
      font-size: px2rem(14);
      color: #fff;
    }
  }
    .ebook-bookmark-icon-wrapper {
      position: absolute;
      right: 0;
      bottom: 0;
      margin-right: px2rem(15);

    }
}
</style>
